import React, { DetailedHTMLProps, HTMLAttributes } from 'react';
import _ from 'lodash';
import classNames from 'classnames';

interface IContentProps extends React.HTMLAttributes<HTMLDivElement>, React.ClassAttributes<HTMLDivElement> {
}

const Content_ = (props: Readonly<IContentProps>): JSX.Element => {
    const { style, ...restProps } = props;
    const defaultStyle: React.CSSProperties = { paddingTop: '6rem', paddingBottom: '2rem' };
    return <div style={_.merge(defaultStyle, style)} {...restProps} >
        <div className="ui container">{props.children}</div>
    </div>;
};

interface IPageTitleProps extends React.HTMLAttributes<HTMLHeadingElement>, React.ClassAttributes<HTMLHeadingElement> {
    subTitle?: string,
}

const PageTitle_ = (props: Readonly<IPageTitleProps>): JSX.Element => {
    const { subTitle: subTitle_, className, ...restProps } = props;
    const subTitle = _.trim(subTitle_);
    return <h1 className={classNames('ui huge header', className)} {...restProps}>
        {props.children}
        {props.subTitle && <span className="sub header">{subTitle}</span>}
    </h1>
};

const Content = Content_;
const PageTitle = React.memo(PageTitle_);

export { Content, PageTitle };